<template>
    <PageView>
        <a-spin :spinning="loading">
            <a-card hoverable v-for="(value,key) in list" style="margin-bottom: 20px">
                <a slot="title">{{value.type|typeGet}} (是否在前台显示: <span :style="{color:value.bank_status===`0`?`red`:`green`}">{{value.bank_status===`0`?`否`:`是`}}</span>) 添加时间{{timeOne(value.add_time)}}</a>
                <a-button-group slot="extra">
                    <a-button v-if="value.bank_status!==`0`" @click="changeStatus(value.id)" type="danger">
                        隐藏
                    </a-button>
                    <a-button type="primary" @click="sub(value)">保存</a-button>
                </a-button-group>
                <!--银行卡内容-->
                <a-form :form="value.form" layou="vertical">
                    <a-row :gutter="10" type="flex" align="middle">
                        <a-col :xs="24" :md="6" :lg="6" :xl="6">
                            <a-form-item label="姓名">
                                <a-input v-decorator="[`username`, { rules: [{ required: true, message: '请输入姓名' }],initialValue:value.username}]"
                                         placeholder="请输入姓名"/>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :md="6" :lg="6" :xl="6">
                            <a-form-item :label="value.type===`4`?`钱包地址`:`账号`">
                                <a-input v-decorator="[`bankcard`, { rules: [{ required: true, message: `请输入${value.type===`4`?`钱包地址`:`账号`}` }],initialValue:value.bankcard}]"
                                         :placeholder="`请输入${value.type===`4`?`钱包地址`:`账号`}`"/>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :md="6" :lg="6" :xl="6" v-if="value.type===`3`">
                            <a-form-item label="支行">
                                <a-input v-decorator="[`bank`, { rules: [{ required: true, message: '请输入支行' }],initialValue:value.bank}]"
                                         placeholder="请输入支行"/>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :md="6" :lg="6" :xl="6" v-if="value.type===`1`||value.type===`2`">
                            <img :src="value.image" style="height: 120px;display: block;margin: 0 auto"/>
                        </a-col>
                        <a-col :xs="24" :md="6" :lg="6" :xl="6" v-if="value.type===`1`||value.type===`2`">
                            <div class="btnCon">
                                <input @change="handleChange($event,value)" type="file" accept="image/*"/>
                                <a-button-group>
                                    <a-button type="primary">选择收款码</a-button>
                                </a-button-group>
                            </div>
                        </a-col>
                    </a-row>
                </a-form>
            </a-card>
        </a-spin>
    </PageView>
</template>

<script type="text/jsx">
    import Member from '../../api/Member'

    export default {
        name: 'editReceiveList',
        filters: {
            typeGet (n) {
                let type = {
                    1: '微信',
                    2: '支付宝',
                    3: '银行卡',
                    4: 'USDT钱包'
                }
                return type[n]
            }
        },
        data () {
            return {
                loading: true,
                uid: null,
                list: [],
            }
        },
        activated () {
            this.list = []
            this.uid = this.$route.query.uid
            this.getUserBank()
        },
        methods: {
            getUserBank () {
                this.loading = true
                Member.getUserBank({ uid: this.uid }).then(res => {
                    this.loading = false
                    this.list = res.bank.map(v => {
                        v.form = this.$form.createForm(this)
                        return v
                    })
                })
            },
            handleChange(e,v){
                let file = e.target.files[0];
                let reader = new FileReader();
                reader.onload = () => {
                    Member.uploadPic({image:reader.result}).then(res=>{
                        v.image = res.url1
                    })
                    reader.onload = null;
                };
                reader.readAsDataURL(file);
            },
            sub(value){
                value.form.validateFields((err, values) => {
                    if (!err) {
                        this.loading = true
                        Member.saveBank({...values,id:value.id,image:value.image||undefined}).then(res => {
                            this.loading = false
                        }).catch(res=>{
                            this.getUserBank()
                            this.loading = false
                        })
                    }
                });
            },
            changeStatus (id) {
                let type = "1"
                this.$confirm({
                    title: `隐藏此收款方式`,
                    content: (
                        <a-select style="width:100%;margin-top:20px" placeholder="状态" defaultValue={type} onChange={(e)=>{
                            type = e
                        }}>
                            <a-select-option value="1">现金</a-select-option>
                            <a-select-option value="2">USDT</a-select-option>
                            <a-select-option value="3">现金+USDT</a-select-option>
                        </a-select>
                    ),
                    centered: true,
                    onOk: () => {
                        return new Promise((resolve, reject) => {
                            Member.delBank({ id,type }).then(res => {
                                resolve()
                                this.getUserBank()
                            }).catch(res => {
                                resolve()
                            })
                        })
                    }
                })
            },
        }
    }
</script>

<style scoped lang="less">
    .btnCon{
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        display: inline-block;
        input{
            display: block;
            position: absolute;
            z-index: 1;
            width: 100%;
            height: 100%;
            background: red;
            opacity: 0;
        }
    }
</style>